<template>
    <el-timeline :class="{ 'el-timeline-horizontal': direction == 'horizontal' }">
        <el-timeline-item center v-for="(item, index) in newData" :key="index" :type="item?.completed ? 'success' : 'danger'" v-if="newData.length">
            <my-panel :header="false" class="w-260">
                <div v-for="(inm, inx) in [...defaultItem, ...cardItem]" :key="inx" v-if="newData.length">
                    <slot :name="inm.prop" :row="item" :config="inm">
                        <div v-if="item?.[inm.prop]" class="p-b-4 flex" :style="{ color: stateColor[item?.type] }">
                            <span :style="labelStyle">{{ inm.label }}：</span>
                            <el-image v-if="inm.label == '签名'" style="height: 21px" :src="item[inm.prop]" fit="contain" :preview-src-list="[item[inm.prop]]" />
                            <span v-else> {{ item?.[inm.prop] }}</span>
                        </div>
                        <my-corner-mark v-if="item?.type == 'STOP'" type="info">已终止</my-corner-mark>
                        <my-corner-mark v-if="item?.type == 'REJECT'" type="danger">已驳回</my-corner-mark>
                    </slot>
                </div>
            </my-panel>
        </el-timeline-item>
        <div v-else>暂无数据</div>
    </el-timeline>
</template>

<script setup>
import { addUnit } from 'element-plus/es/utils/dom/index.mjs';

const props = defineProps({
    // 数据
    data: {
        type: Array,
        default: () => [],
    },
    // 自定义字段
    cardItem: {
        type: Array,
        default: () => [],
    },
    //无数据默认提示
    description: {
        type: String,
        default: '暂无流转记录',
    },
    direction: {
        type: String,
        default: 'vertical',
        validator(val) {
            return ['vertical', 'horizontal'].includes(val);
        },
    },
    labelWidth: {
        type: [String, Number],
        default: '90',
    },
});

const labelStyle = computed(() => {
    const labelWidth = addUnit(props.labelWidth);
    if (labelWidth) return { width: labelWidth, display: 'inline-block', 'text-align': 'right' };
    return {};
});

//默认字段
const defaultItem = [
    {
        label: '节点名称',
        prop: 'actName',
    },
    {
        label: '开始时间',
        prop: 'startTime',
    },
    {
        label: '结束时间',
        prop: 'endTime',
    },
    {
        label: '审批人',
        prop: 'assignee',
    },
    {
        label: '备注',
        prop: 'fullMsg',
    },
    {
        label: '签名',
        prop: 'autograph',
    },
];

const stateColor = {
    REJECT: '#F56C6C', //驳回
    STOP: '#909399', //撤回
};

let newObj = {};

/**
 *将对象中的对象递归到同一级
 * @param {*目标对象} obj
 */

function deconstruction(obj) {
    for (const val in obj) {
        //判断是否是Object类型
        if (obj[val] instanceof Object) {
            deconstruction(obj[val]);
        } else {
            //去除重复字段
            if (!newObj.hasOwnProperty(`${val}`)) {
                newObj[val] = obj[val];
            }
        }
    }
    return newObj;
}

let newData = ref([]);

watch(
    () => props.data,
    (val) => {
        newData.value = val.map((item) => {
            newObj = {};
            return {
                ...cloneDeep(deconstruction(cloneDeep(item))),
            };
        });
    },
    { immediate: true }
);
</script>

<style lang="scss" scoped>
:deep(.el-card__body) {
    padding: 10px;
}

.el-timeline-horizontal {
    display: flex;
    padding: 0;
    justify-content: center;
    :deep() {
        .el-timeline-item {
            display: flex;
            flex-direction: column;
            padding: 0 20px;
        }
        .el-timeline-item__node {
            top: 0;
            transform: none;
        }
        .el-timeline-item__wrapper {
            padding-left: 0px;
            position: relative;
            top: 15px;
        }
        .el-timeline-item__tail {
            top: 5px;
            height: 0;
            width: 100%;
            left: 0;
            border-left: 0;
            border-top: 2px solid var(--el-timeline-node-color);
        }
        .el-timeline-item__center {
            .el-timeline-item__node {
                top: 0;
                left: auto;
            }
            &:first-child .el-timeline-item__tail {
                top: 5px;
                height: 0;
                width: 50%;
                left: 50%;
                border-left: 0;
                border-top: 2px solid var(--el-timeline-node-color);
            }
            &:last-child .el-timeline-item__tail {
                top: 5px;
                height: 0;
                width: 50%;
                left: 0;
                border-left: 0;
                border-top: 2px solid var(--el-timeline-node-color);
            }
        }
    }
}
</style>
